<template>
    <div class="video" v-title :data-title="`视频播放-${title}`">
        <header-bar></header-bar>
        <div class="video-main">
            <div class="content-left">
                <div v-if="!loading" class="video-player">
                    <video-player :vid="vid" :part="part" :resources="resources"></video-player>
                    <div class="video-title-box">
                        <p class="video-title">{{ videoInfo!.title }}</p>
                        <p v-show="videoInfo!.copyright" class="copyright">
                            <n-icon color='#fd6d6f'>
                                <banSharp />
                            </n-icon>
                            <span>未经作者授权，禁止转载</span>
                        </p>
                    </div>
                    <!-- 点赞收藏等数据 -->
                    <div class="video-toolbar">
                        <div class="toolbar-left">
                            <archive-info :stat="stat" :vid="videoInfo!.vid"></archive-info>
                        </div>
                        <!-- 日期播放和在线人数 -->
                        <div class="toolbar-right">
                            <span>{{ number }}人在看</span>
                            <span>{{ videoInfo!.clicks }}播放</span>
                            <span>上传于<n-time :time="new Date(videoInfo!.created_at)"></n-time></span>
                        </div>
                    </div>
                    <!--视频简介-->
                    <div class="desc">
                        <div :class="['desc-content', more ? 'open' : '']">{{ videoInfo!.desc }}</div>
                        <n-button text @click="more = !more">{{ more ? '收起' : '展开更多' }}</n-button>
                    </div>
                    <!--发表评论-->
                    <comment :vid="videoInfo!.vid"></comment>
                </div>
                <div v-else class="player-skeleton">
                    <n-skeleton height="500px" />
                    <n-skeleton text :repeat="2" />
                    <n-skeleton text width=" 60%" />
                </div>
            </div>
            <div class="content-right">
                <!--作者信息-->
                <author-card :loading="loading" :author="videoInfo?.author"></author-card>
                <!-- 视频分集 -->
                <div v-if="resources.length > 1">
                    <part-list :resources="resources" :active="part" @change="changePart"></part-list>
                </div>
                <!-- 用户视频 -->
                <author-video v-if="!loading" :uid="videoInfo!.author.uid"></author-video>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import VideoPlayer from "./components/VideoPlayer.vue";
import config from '@/config';
import { statType } from '@/types/archive';
import { useRoute, useRouter } from 'vue-router';
import { NIcon, NTime, NButton, NSkeleton } from 'naive-ui';
import { defineComponent, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue';
import { getVideoInfoAPI } from '@/api/video';
import { BanSharp } from '@vicons/ionicons5';
import { OnlineSocketURL } from '@/utils/request';
import Comment from './components/Comment.vue';
import PartList from './components/PartList.vue';
import HeaderBar from '@/components/HeaderBar.vue';
import AuthorCard from './components/AuthorCard.vue';
import AuthorVideo from './components/AuthorVideo.vue';
import ArchiveInfo from './components/ArchiveInfo.vue';
import { videoType } from '@/types/video';

export default defineComponent({
    setup() {
        const route = useRoute();
        const router = useRouter();
        const vid = parseInt(route.params.vid.toString());
        const title = config.title;
        const part = ref(1);//当前分集
        const more = ref(false);//是否展开简介
        const stat = ref<statType>({
            like: 0,
            collect: 0
        });//点赞收藏数据
        const loading = ref(true);
        const resources = ref<Array<any>>([]);
        const videoInfo = ref<videoType | null>(null);

        //获取视频信息
        const getVideoInfo = (vid: number) => {
            getVideoInfoAPI(vid).then((res) => {
                if (res.data.code === 2000) {
                    videoInfo.value = res.data.data.video;
                    resources.value = res.data.data.video.resources;
                    //设置播放的资源
                    if (!resources.value[part.value - 1]) {
                        part.value = 1;
                    }

                    stat.value = res.data.data.stat;
                    //修改网站标题
                    document.title = `${res.data.data.video.title}-${title}`
                    loading.value = false;
                }
            })
        }

        //websocket
        const number = ref(1);//在线人数
        const SocketURL = ref("");
        const websocket = ref<WebSocket | null>(null);
        //初始化weosocket
        const initWebSocket = (vid: number) => {
            const wsProtocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
            if (OnlineSocketURL === "/api/v1/video/online/ws") {
                SocketURL.value = wsProtocol + window.location.host + "/api/v1/video/online/ws";
            } else {
                //处理协议部分
                let reg = new RegExp('^http(s)?:')
                SocketURL.value = OnlineSocketURL.replace(reg, wsProtocol);
            }
            SocketURL.value += `?vid=${vid}`;
            websocket.value = new WebSocket(SocketURL.value);
            websocket.value.onmessage = websocketOnmessage;
        }

        //数据接收
        const websocketOnmessage = (e: any) => {
            const res = JSON.parse(e.data);
            number.value = res.number;
        }

        const changePart = (target: number) => {
            if (resources.value[target - 1]) {
                part.value = target;
            }
            router.replace({ query: { p: part.value } });
        }

        onBeforeMount(() => {
            initWebSocket(Number(route.params.vid));
            getVideoInfo(Number(route.params.vid));
            if (route.query.p) {
                part.value = Number(route.query.p);
            }
        })

        onBeforeUnmount(() => {
            if (websocket.value) {
                websocket.value.close();
            }
        })


        return {
            vid,
            stat,
            more,
            part,
            title,
            number,
            loading,
            resources,
            videoInfo,
            changePart
        }
    },
    components: {
        VideoPlayer,
        Comment,
        NTime,
        NIcon,
        NButton,
        NSkeleton,
        BanSharp,
        PartList,
        HeaderBar,
        AuthorCard,
        AuthorVideo,
        ArchiveInfo
    }
});
</script>

<style lang="less" scoped>
.video {
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    position: fixed;
    overflow-y: scroll;
}

.video-main {
    width: calc(100% - 100px);
    background: #fff;
    margin: 20px auto 0 auto;
    display: flex;
    flex-wrap: nowrap;
}

.content-left {
    width: calc(100% - 350px);
    min-width: 680px;

    .video-player {
        margin: 0 auto;
        width: calc(100% - 120px);
        /*16:9*/
        min-width: 680px;
        min-height: 382px;
    }

    .video-title-box {
        width: 100%;
        height: 36px;
        display: flex;

        .video-title {
            width: calc(100% - 160px);
            margin: 0;
            font-size: 20px;
            color: #303030;
            line-height: 30px;
            font-weight: 500;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .copyright {
            width: 160px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: 12px;
            color: #636363;
        }
    }

    //骨架占位
    .player-skeleton {
        margin: 0 auto;
        width: calc(100% - 120px);
    }
}

.video-toolbar {
    color: #505050;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e9f0;

    .toolbar-right {
        display: inline-block;

        span {
            margin-left: 20px;
        }
    }
}

//简介
.desc {
    .desc-content {
        max-height: 36px;
        font-size: 14px;
        color: #212121;
        line-height: 18px;
        overflow: hidden;
        white-space: pre-line;
        transition: height 0.3s;
    }

    .open {
        // height: auto;
        max-height: none;
    }
}

/**右半部分 */
.content-right {
    width: 350px;
    height: 600px;
    min-width: 350px;
}
</style>